<template>
  <div>
    <!--金额选择-->
    <div class="box">
    <el-row :gutter="20" class="dxk">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-radio v-model="radio" label="50" @change="getValue()" border>50元</el-radio>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-radio v-model="radio" label="100" @change="getValue()" border>100元</el-radio>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-radio v-model="radio" label="500" @change="getValue()" border>500元</el-radio>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-radio v-model="radio" label="1000" @change="getValue()" border>1000元</el-radio>
        </div></el-col
      >
    </el-row>
    </div>
    <el-divider></el-divider>
    <!--输入手机号充值-->
    <el-row class="chaxun">
      <el-col :span="7"
        ><el-input
          placeholder="请输入手机号码"
          v-model="keyword"
          suffix="el-icon-search"
          clearable
        >
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="success" @click="dialogVisible"  v-bind:disabled="keyword.length!=11">充值</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "50",
      keyword:"",
    };
  },
  methods: {
   getValue(){
      console.log(this.radio)  //单选框获取值
    },
    
    dialogVisible() {
      console.log(this.keyword)
       let obj =this.radio
      this.$axios({
        url:'/website/userController/userMoney',
        method:'post',
        data:{tel:this.keyword,money:this.radio}
      }).then(res=>{
        console.log(res.data)
        if(res.data.code == 200){
          this.$message.success('充值成功')
        }else{
           this.$message.error('手机号不存在，充值失败！')
        }
      })
      this.keyword=''
    }
  }
};
</script>

<style scoped>
.chaxun {
  padding: 20px 0;
  margin-left: 40%;
}
.dxk,.box {
  padding: 20px 0;
}

</style>
